
import { useMutation, useQuery } from "@tanstack/react-query";
import { Form, Input, InputNumber, message, Modal, Select, Tree } from "antd";
import { forwardRef, useEffect, useImperativeHandle, useState } from "react"
import DataSourceSelect from "@/pages/dataSource/modules/DataSourceSelect";
import { subjectNodeAdd, subjectNodeEdit } from '@/api/sharing/dataSubject'
const filterOptions = (list) => {
  return list.map(item => {
    if (item.isExistMenu === '0') {
      item.disabled = true
    }
    if (item.appChildren && item.appChildren.length) {
      filterOptions(item.appChildren)
    }
    return item
  })
}

const StructureFieldModal = forwardRef((props, ref) => {
  const [form] = Form.useForm()
  const [isModalOpen, setIsModalOpen] = useState()
  const nodeType = Form.useWatch('nodeType', form)

  useImperativeHandle(ref, () => ({
    showAddModal: (row) => {
      form.resetFields()
      form.setFieldsValue({
        themeId: props.themeId,
        parentId: row.id,
        // id: '',
        // nodeName: '',
        // nodeType: '',
        // nodeRemark: ''
      })
      setIsModalOpen(true)
    },
    showEditModal: (row) => {
      form.resetFields()
      form.setFieldsValue({
        themeId: props.themeId,
        name: row.nodeName,
        ...row
      })
      setIsModalOpen(true)
    },
  }));

  const mutation = useMutation({
    mutationFn: (param) => {
      const apiFun = param.id ? subjectNodeEdit : subjectNodeAdd
      return apiFun(param).then(res => {
        if (res.code !== 200) return Promise.reject(res.msg)
      })
    },
    onSuccess: () => {
      message.success(form.getFieldValue('id') ? '修改成功' : '新增成功')
      setIsModalOpen(false)
      props.onFinish()
    }
  })

  const handleOk = () => {
    let values = form.getFieldsValue()
    mutation.mutate({ ...values, nodeName: values.name })
  };
  const handleCancel = () => {
    setIsModalOpen(false)
  };

  return <Modal open={isModalOpen} title="新增结构" confirmLoading={mutation.isPending} onOk={handleOk} onCancel={handleCancel}>
    <Form form={form} labelAlign="right" labelCol={{ span: 4 }}>
      <Form.Item name={'id'} hidden><Input /></Form.Item>
      <Form.Item name={'themeId'} hidden><Input /></Form.Item>
      <Form.Item name={'parentId'} hidden><Input /></Form.Item>
      <Form.Item name="name" label="节点名称" rules={[{ required: true, message: '请填写节点名称' }]}>
        <Input placeholder='请填写节点名称' />
      </Form.Item>
      <Form.Item name="nodeType" label="节点类型" rules={[{ required: true, message: '请选择节点类型' }]}>
        <Select placeholder='请选择节点类型' options={[{ label: '目录节点', value: 'CATALOG' }, { label: '数据节点', value: 'DATA' }]} />
      </Form.Item>
      {
        nodeType === 'DATA' &&
        <Form.Item name="dataSourceId" label="数据源" rules={[{ required: true, message: '数据源不能为空' }]}>
          <DataSourceSelect placeholder={'请选择数据源'} />
        </Form.Item>
      }
      <Form.Item name="nodeRemark" label="描述">
        <Input.TextArea rows={3} placeholder='请输入内容' />
      </Form.Item>
    </Form>
  </Modal>
})




export default StructureFieldModal